<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="test">
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
    <!-- v-model的本质: 动态value属性 + input事件监听(将最新输入的值保存到对应data属性上) -->
    <input type="text" :value="msg" @input="(event) => {msg = event.target.value}">

  </div>
  
  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#test',
      data: {
        msg: 'Hello atguigu'
      }
    })

    setTimeout(() => {
      vm.msg += '--'
    }, 2000);

    /* 
    data与页面之的数据传递是双向的:   称为: 双向数据绑定
    页面显示会随着data数据的更新而更新显示   data => 页面  :value="msg"
    当改变页面输入时, 会自动将输入的最新值更新到data数据上  页面 => data    @input="(event) => {msg = event.target.value}"
    */
  </script>
</body>
</html>